<template>
  <div class="login_content">
    <div class="title">
      <span @click="btnFanhu" style="cursor: pointer">返回</span>
      <span style="margin-left: 80px">注册账号</span>
    </div>
    <div class="input_title" style="margin-top: 32px">用户名</div>
    <div class="input_info">
      <el-input
        ref="input"
        placeholder="请输入用户名"
        v-model="username"
        maxlength="20"
        @input="input"
      >
      </el-input>
    </div>
    <div class="input_title" style="margin-top: 16px">密码</div>
    <div class="input_info">
      <el-input
        ref="input1"
        placeholder="请输入密码"
        v-model="password"
        maxlength="16"
        @input="input1"
        @blur="blur1"
        show-password
        class="mobile-input"
      >
      </el-input>
    </div>
    <div class="input_title" style="margin-top: 16px">确认密码</div>
    <div class="input_info">
      <el-input
        ref="input1"
        placeholder="确认密码"
        v-model="c_password"
        maxlength="16"
        @input="input2"
        @blur="blur1"
        show-password
        class="mobile-input"
      >
      </el-input>
    </div>
    <el-button type="primary" @click="btnLogin">注册</el-button>
  </div>
</template>

<script>
import { post } from '@/utils/request'
export default {
  data() {
    return {
      username: '',
      password: '',
      c_password: ''
    }
  },
  methods: {
    async btnLogin() {
      await post(
        `/user/user/create`,
        {
          username: this.username,
          password: this.password,
          c_password: this.c_password
        },
        'application/json;charset=utf-8'
      ).then((res) => {
        if (res.status == '200') {
          this.$message('注册成功')
          this.$nextTick(() => {
            this.$emit('logins')
          })
        } else {
          this.$message.error(res.info)
        }
      })
    },
    btnFanhu() {
      this.$emit('logins')
    }
  }
}
</script>

<style lang="scss" scoped>
.login_night {
  width: 440px;
  height: 488px;
  background: #ffffff;
  box-shadow: 0px 2px 14px 0px #eaebee;

  .login_content {
    width: 336px;
    margin: auto;
  }

  .input_title {
    line-height: 20px;
    margin-bottom: 8px;
  }

  .title {
    font-size: 20px;
    font-family: MiSans-Regular;
    font-weight: bold;
    color: #1a1a1a;
    margin-top: 56px;
    line-height: 28px;
  }

  .input_info {
    position: relative;

    .icon {
      width: 16px;
      height: 16px;
      z-index: 1;
      left: 16px;
      top: 12px;
      position: absolute;
    }

    .close {
      left: 304px;
      cursor: pointer;
    }

    :deep(.el-input) {
      height: 40px;
      border-radius: 6px;
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #1a1a1a;
    }

    :deep(.el-input__inner) {
      padding-left: 8px;
    }

    :deep(input::-webkit-input-placeholder) {
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #9d9da2;
    }

    .mobile-input {
      :deep(.el-input__wrapper) {
        padding-right: 16px;
      }
    }
  }

  :deep(.el-button) {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    margin-top: 32px;
  }

  .xuan-z {
    // margin-left: 32px;
    margin-top: 10px;
  }

  .warning {
    font-size: 12px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #9d9da2;
    margin-left: 78px;
    margin-top: 54px;
  }
}
</style>
